import "../../../css/home.scss"
import { Table } from 'antd';
import Examplis from "../../../component/examplis/examplis";
const Home = () => {

  const columns = [
    {
      title: '日期',
      dataIndex: 'time',
    },
    {
      title: '人数',
      dataIndex: 'num'
    }
  ];
  const data = [
    {
      key: '1',
      time: '2022-06-01',
      num: 32
    },
  ]
  const columnsType = [
    {
      title: '日期',
      dataIndex: 'timeType'
    },
    {
      title: '类型',
      dataIndex: 'type'
    },
    {
      title: '人数',
      dataIndex: 'numType'
    }
  ];
  const dataType = [
    {
      key: '1',
      timeType: '2022-06-01',
      type: '外来',
      numType: 10
    },
    {
      key: '2',
      timeType: '2022-06-01',
      type: '学生',
      numType: 12
    },
    {
      key: '3',
      timeType: '2022-06-01',
      type: '老师',
      numType: 10
    },
  ]
  return (
    <div className='home'>

      {/* 头部 */}
      <div className="head">

        <div className="head1">
          <div className="todaySvisitor">

            <div className="tubiao">
              <div className="title">今日访客</div>
              <div className="fonts">20</div>
            </div>

            <div className="jin">
              <div className="shen">待审核：20人</div>
              <div className="tong">未通过：20 人 已取消：1 人</div>
            </div>

          </div>

          <div className="todaySvisitor">

            <div className="tubiao2">
              <div className="title">昨日访客</div>
              <div className="fonts">20</div>
            </div>

            <div className="jin">
              <div className="shen">待审核：20人</div>
              <div className="tong">未通过：20 人 已取消：1 人</div>
            </div>

          </div>

          <div className="todaySvisitor">

            <div className="tubiao3">
              <div className="title">最近七天</div>
              <div className="fonts">20</div>
            </div>

            <div className="jin">
              <div className="shen">待审核：20人</div>
              <div className="tong">未通过：20 人 已取消：1 人</div>
            </div>

          </div>
        </div>

        <div className="head2">

          <div className="todaySvisitor">

            <div className="tubiao4">
              <div className="title">最近三十天</div>
              <div className="fonts">20</div>
            </div>

            <div className="jin">
              <div className="shen">待审核：20人</div>
              <div className="tong">未通过：20 人 已取消：1 人</div>
            </div>

          </div>

          <div className="todaySvisitor">

            <div className="tubiao5">
              <div className="title">最近一年</div>
              <div className="fonts">20</div>
            </div>

            <div className="jin">
              <div className="shen">待审核：20人</div>
              <div className="tong">未通过：20 人 已取消：1 人</div>
            </div>

          </div>
        </div>

      </div>

      {/* 折线图 */}
      <div className='record'>
        <Examplis></Examplis>
      </div>


      {/* 列表 */}
      <div className='table'>

        <div className='header'>本周详情</div>

        <div className='body'>

          <div className='box'>
            <span>本周人员统计表：</span>
            <Table
              columns={columns} //头部标题
              dataSource={data} //列表数据
              bordered          //线
              pagination={false}//是否分页默认为true
            />
          </div>

          <div className='box'>
            <span>本周人员申请类型表：</span>
            <Table
              columns={columnsType}
              dataSource={dataType}
              bordered
              pagination={false}
            />
          </div>

          {/* <div></div> */}
        </div>
      </div>
    </div>
  )
}
export default Home